import React, {FC} from 'react';
import {View, Text, StyleSheet, TouchableOpacity, Image} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {RootStackParamList} from '../../../App';

import ArticleDetailStore from '../../stores/ArticleDetailStore';
import icon_arrow from '../../assets/icon_arrow.png';
import icon_share from '../../assets/icon_share.png';
import Toast from '../../components/widget/Toast';
import {observer} from 'mobx-react';
type PropsType = {};
const Title: FC<PropsType> = observer(() => {
  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
  const {avatarUrl, userName} = ArticleDetailStore.detail;
  console.log('Title avatar', avatarUrl);
  const share = () => {
    Toast.show('分享文章');
  };
  return (
    <View style={styles.titleLayout}>
      <TouchableOpacity style={styles.backBtn} onPress={() => navigation.pop()}>
        <Image source={icon_arrow} style={styles.backImg} />
      </TouchableOpacity>
      {avatarUrl && (
        <Image source={{uri: avatarUrl}} style={styles.avatarImg} />
      )}
      <Text style={styles.nameTxt}>{userName}</Text>
      <Text style={styles.followTxt}>关注</Text>
      <TouchableOpacity style={styles.shareBtn} onPress={() => share}>
        <Image source={icon_share} style={styles.shareImg} />
      </TouchableOpacity>
    </View>
  );
});

const styles = StyleSheet.create({
  titleLayout: {
    width: '100%',
    height: 56,
    flexDirection: 'row',
    alignItems: 'center',
  },
  backBtn: {
    paddingHorizontal: 16,
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  backImg: {
    width: 20,
    height: 20,
    resizeMode: 'contain',
  },
  avatarImg: {
    width: 30,
    height: 30,
    borderRadius: 15,
    resizeMode: 'cover',
  },
  nameTxt: {
    fontSize: 16,
    color: '#333',
    marginLeft: 8,
    flex: 1,
  },
  followTxt: {
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: '#ff2442',
    color: '#ff2442',
  },
  shareBtn: {
    paddingHorizontal: 16,
  },
  shareImg: {
    width: 20,
    height: 20,
    resizeMode: 'contain',
  },
});
export default Title;
